<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* width: 50px; */
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化 -->
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box')
        //定时器会再打开浏览器时延迟1秒才开始执行，先调用一次
        getData()
        //定时器，让时间实时刷新
        var times = setInterval(getData, 1000)
        function getData() {
            var date = new Date()
            var year = date.getFullYear() //年
            var month = date.getMonth() + 1 //月(返回的月份会少一个月，所以 + 1)
            var Dates = date.getDate() // 日
            var day = date.getDay() //星期
            var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var h = date.getHours() //时
            var h = h < 10 ? '0' + h : h
            var m = date.getMinutes() //分
            var m = m < 10 ? '0' + m : m
            var s = date.getSeconds() //秒
            var s = s < 10 ? '0' + s : s
            // console.log(year);
            // console.log(month);
            // console.log(Dates);
            // console.log(day);
            // console.log(h);
            // console.log(m);
            // console.log(s);
            box.innerHTML = `${year}年${month}月${Dates}日${arr[day]}${h}:${m}:${s}`
        }
       
    </script>
</body>
</html>